<template>
  <div class="app-container">
    <el-card v-permission="['pay:config_detail']" class="box-card">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="configGroup.wx_pay.name" :id="configGroup.wx_pay.id" name="wx_pay" class="margin-10">
          <el-form ref="configForm" :model="configForm" label-width="150px">
            <el-form-item label="商户号" prop="mchId">
              <el-input v-model="configForm.mchId" placeholder="微信商户平台 商户号" />
            </el-form-item>
            <el-form-item label="API V3密钥" prop="apiKeyV3">
              <el-input v-model="configForm.apiKeyV3" placeholder="微信商户平台 自己设定的32位 Api调用 Key" />
            </el-form-item>
            <el-form-item label="API V1密钥" prop="apiKeyV1">
              <el-input v-model="configForm.apiKeyV1" placeholder="微信商户平台 自己设定的32位 Api调用 Key" />
            </el-form-item>
            <el-form-item label="API 证书序列号" prop="serialNo">
              <el-input v-model="configForm.serialNo" placeholder="API V3证书序列号" />
            </el-form-item>
            <el-form-item label="支付回调URL" prop="notifyUrl">
              <el-input v-model="configForm.notifyUrl" placeholder="https://api.example.com/cb/wxpay" />
            </el-form-item>
            <el-row>
              <el-col :span="8">
                <el-form-item label="apiclient_cert.p12" prop="certP12">
                  <el-upload :headers="headers" :auto-upload="true" :with-credentials="true" :on-success="uploadCertP12Success" :on-remove="removeCertP12Success" :limit="1" :file-list="fileListCertP12" :action="uploadPath">
                    <el-button v-permission="['pay:config_upload']" v-if="fileListCertP12.length===0" size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="apiclient_cert.pem" prop="certPem" class="fl">
                  <el-upload :headers="headers" :auto-upload="true" :with-credentials="true" :on-success="uploadCertPemSuccess" :on-remove="removeCertPemSuccess" :limit="1" :file-list="fileListCertPem" :action="uploadPath">
                    <el-button v-permission="['pay:config_upload']" v-if="fileListCertPem.length===0" size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="apiclient_key.pem" prop="keyPem" class="fl">
                  <el-upload :headers="headers" :auto-upload="true" :with-credentials="true" :on-success="uploadKeyPemSuccess" :on-remove="removeKeyPemSuccess" :limit="1" :file-list="fileListKeyPem" :action="uploadPath">
                    <el-button v-permission="['pay:config_upload']" v-if="fileListKeyPem.length===0" size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="op-container text-center">
            <el-button v-permission="['pay:config_setting']" :loading="submitIng" type="primary" @click="handleSave">保存更改</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { ConfigService, uploadPath } from '@/api/SystemService'
import Notify from '@/utils/notify'
import Uploader from '@/components/Uploader'
import { getToken } from '@/utils/auth'

export default {
  name: 'WechatPayConfig', components: { Uploader },
  data() {
    return {
      uploadPath: uploadPath, fileListCertP12: [], fileListCertPem: [], fileListKeyPem: [],
      activeName: 'wx_pay', configForm: {}, submitIng: false, headers: { token: getToken() },
      configGroup: {
        wx_pay: { id: 4, name: '微信支付配置' }}
    }
  },
  created() {
    this.loadData(this.configGroup.wx_pay.id)
  },
  methods: {
    loadData(type) {
      ConfigService.getWeChatConfig(type).then(res => {
        this.configForm = res
        const certP12 = res.certP12
        const certPem = res.certPem
        const keyPem = res.keyPem
        if (certP12) {
          this.fileListCertP12 = [{ name: certP12.substring(certP12.lastIndexOf('/') + 1), url: certP12 }]
        }
        if (certPem) {
          this.fileListCertPem = [{ name: certPem.substring(certPem.lastIndexOf('/') + 1), url: certPem }]
        }
        if (keyPem) {
          this.fileListKeyPem = [{ name: keyPem.substring(keyPem.lastIndexOf('/') + 1), url: keyPem }]
        }
      })
    },
    handleSave() {
      this.submitIng = true
      ConfigService.saveWeChatConfig(this.configForm).then(() => {
        Notify.success(this, '保存成功!')
        this.submitIng = false
      })
    },
    uploadKeyPemSuccess(result) {
      this.configForm.keyPem = result.data.path
    },
    removeKeyPemSuccess() {
      this.configForm.keyPem = undefined
      this.fileListKeyPem = []
    },
    uploadCertP12Success(result) {
      this.configForm.certP12 = result.data.path
    },
    removeCertP12Success() {
      this.configForm.certP12 = undefined
      this.fileListCertP12 = []
    },
    uploadCertPemSuccess(result) {
      this.configForm.certPem = result.data.path
    },
    removeCertPemSuccess() {
      this.configForm.certPem = undefined
      this.fileListCertPem = []
    }
  }
}
</script>
<style>
  .el-upload-list__item-name{white-space:unset;}
</style>
